<template>
  <view>
    <view class="personal-center">
      <view class="person-item">
        <view class="title first-title">头像</view>
        <view class="value">
          <u--image
            class="infor-image"
            :showLoading="true"
            :src="userImage"
            width="84rpx"
            height="84rpx"
          ></u--image>
        </view>
      </view>
      <view class="person-item">
        <view class="title">用户ID</view>
        <view class="value">{{ workerDetail.idCard }}</view>
      </view>
      <view class="person-item">
        <view class="title">昵称</view>
        <view class="value">{{ workerDetail.realName }}</view>
      </view>
      <view class="person-item">
        <view class="title">电话</view>
        <view class="value">{{ workerDetail.phone }}</view>
      </view>
    </view>
    <u-button
      class="btn"
      type="error"
      shape="circle"
      size="small"
      :hairline="true"
      text="退出"
      @click="exit"
    ></u-button>
  </view>
</template>

<script>
import userImage from "@/static/iconImages/user-image.png";
import { workerDetail } from "@/api/worker";
export default {
  data() {
    return {
      userImage,
      workerDetail: {},
    };
  },
  mounted() {
    this.getWorkerDetail();
  },
  methods: {
    async getWorkerDetail() {
      try {
        const res = await workerDetail();
        this.workerDetail = res.data;
      } catch (error) {
        console.log(error);
      }
    },
    exit() {
      uni.removeStorage("token");
      uni.removeStorage("areaId");
      uni.removeStorage("categoryId");
      uni.removeStorage({
        key: "userInfor",
        success() {
          uni.navigateTo({
            url: "/pages/login/index",
          });
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  background-color: #f5f6fa;
}
.personal-center {
  background: #fff;
  .person-item {
    padding: 18rpx 0 26rpx 0;
    background: #fff;
    margin: 0 40rpx;
    border-bottom: 1rpx solid #eeeeee;
    display: flex;
    justify-content: space-between;
    line-height: 52rpx;
    .title {
      font-size: 30rpx;
      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
      font-weight: 400;
      color: #353535;
    }
    .first-title {
      line-height: 84rpx;
    }
    .value {
      font-size: 30rpx;
      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
      font-weight: 400;
      color: #999999;
    }
  }
}
.btn {
  margin-top: 80rpx;
  width: 70%;
}
</style>